{extend name="layouts/base"}

{block name="header"}

<link rel="stylesheet" href="__STATIC__/wap/css/bootstrap.min.css">
<link rel="stylesheet" href="__STATIC__/wap/css/base_1.css">
<script src="__STATIC__/wap/js/jquery_1.js"></script>
<script src="__STATIC__/wap/js/autohidenav.js"></script>
<script src="__STATIC__/wap/js/common_1.js"></script>
<link rel="stylesheet" href="__STATIC__/wap/css/swiper.min.css">
<link rel="stylesheet" href="__STATIC__/wap/css/index_1.css">
{/block}

{block name="main"}
<div class="wrapper">
    <!-- banner -->
    <div class="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">

                <?php
                    foreach ($banner as $k => $v) {
                ?>
                    <div class="swiper-slide">
                    <a href="{$v['link']}" title="轮播图">
                        <img src="{$v['img']}" alt="轮播图" style="height:150px;">
                    </a>

                </div>
                <?php
                    }
                ?>

            </div>

            <?php
                foreach ($banner as $v) {
            ?>
                <div class="swiper-pagination"></div>
            <?php
                }
            ?>

        </div>
    </div>
    <!-- 分类 -->
    <div class="category">
        <ul>
            <ul>
                <?php
                foreach ($M['nav'] as $k => $v) {
                ?>
                <li>
                    <a href="{$v['link']}" title="{$v['name']}">
                        <div class="img">
                            <img src="{$v['icon']}" alt="{$v['name']}">
                        </div>
                        <p>{$v['name']}</p>
                    </a>
                </li>
                <?php
                }
            ?>

                <li>
                    <a href="/index/index/about" title="关于我们">
                        <div class="img">
                            <img src="__STATIC__/wap/picture/c8.png" alt="关于我们">
                        </div>
                        <p>关于我们</p>
                    </a>
                </li>
            </ul>


        </ul>
    </div>
    <!-- 服务 -->
    <div class="service">
        <h2 class="border">热门服务</h2>

        <ul>

            <li>
                <a href="{$qk[0]['areaitems'][0]['link']}" title="{$qk[0]['areaitems'][0]['name']}">
                    <div class="img">
                        <img src="{$qk[0]['areaitems'][0]['image']}" alt="{$qk[0]['areaitems'][0]['link']}">
                    </div>
                    <p>{$qk[0]['areaitems'][0]['name']}</p>
                </a>
            </li>
            <li>
                <a href="{$qk[1]['areaitems'][0]['link']}" title="{$qk[1]['areaitems'][0]['name']}">
                    <div class="img">
                        <img src="{$qk[1]['areaitems'][0]['image']}" alt="{$qk[1]['areaitems'][0]['link']}">
                    </div>
                    <p>{$qk[1]['areaitems'][0]['name']}</p>
                </a>
            </li>
            <li>
                <a href="{$qk[2]['areaitems'][0]['link']}" title="{$qk[0]['areaitems'][0]['name']}">
                    <div class="img">
                        <img src="{$qk[2]['areaitems'][0]['image']}" alt="{$qk[0]['areaitems'][0]['link']}">
                    </div>
                    <p>{$qk[2]['areaitems'][0]['name']}</p>
                </a>
            </li>
            <li>
                <a href="{$qk[3]['areaitems'][0]['link']}" title="{$qk[3]['areaitems'][0]['name']}">
                    <div class="img">
                        <img src="{$qk[3]['areaitems'][0]['image']}" alt="{$qk[3]['areaitems'][0]['link']}">
                    </div>
                    <p>{$qk[3]['areaitems'][0]['name']}</p>
                </a>
            </li>
            <li>
                <a href="{$qk[4]['areaitems'][0]['link']}" title="{$qk[4]['areaitems'][0]['name']}">
                    <div class="img">
                        <img src="{$qk[4]['areaitems'][0]['image']}" alt="{$qk[4]['areaitems'][0]['link']}">
                    </div>
                    <p>{$qk[4]['areaitems'][0]['name']}</p>
                </a>
            </li>
            <li>
                <a href="{$qk[5]['areaitems'][0]['link']}" title="{$qk[5]['areaitems'][0]['name']}">
                    <div class="img">
                        <img src="{$qk[5]['areaitems'][0]['image']}" alt="{$qk[5]['areaitems'][0]['link']}">
                    </div>
                    <p>{$qk[5]['areaitems'][0]['name']}</p>
                </a>
            </li>
        </ul>
    </div>
    <!-- ad -->
    <div class="ad">
        <p>我们专注于企业一站式服务，让您更省力、更高效、更稳健 ！</p>
        <ul>
            <li>
                <h2>
                    16872
                    <span>家</span>
                </h2>
                <span>总成交</span>
            </li>
            <li>
                <h2>
                    2965
                    <span>家</span>
                </h2>
                <span>上月成交</span>
            </li>
            <li>
                <h2>
                    183
                    <span>家</span>
                </h2>
                <span>昨日成交</span>
            </li>
        </ul>
    </div>

    <!-- news -->
    <div class="news">
        <div class="tab border">
            <span class="cur" style="width:100%;">知识问答</span>
            <div class="color" style="width:100%;"></div>
        </div>
        <div class="tab-con">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <ul>
                            <?php
                                foreach ($item as $k => $v) {
                            ?>
                                <li>
                                <a href="/index/question/qdesc?id={$v['id']}" title="{$v['name']}">
                                    <div class="img">
                                        <img src="__STATIC__/wap/picture/15294922693110476elserecommimg1_1.png" alt="缩略图">
                                    </div>
                                    <div class="txt">
                                        <p>
                                            {$v['intro']}
                                        </p>
                                        <span>{:date('Y-m-d H:i:s',$v['update_time'])}</span>
                                    </div>
                                </a>
                            </li>
                            <?php
                                }
                            ?>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- partner -->
    <div class="partner">
        <h2 class="border">合作伙伴</h2>
        <ul>
            <?php foreach($hezuo as $k=>$v){
            ?>
            <li>
                <a href="#" title="合作伙伴">
                    <img src="{$v['img']}" alt="合作伙伴">
                </a>
            </li>
            <?php
                }?>
        </ul>
    </div>
</div>
{/block}

{block name="privateJs"}
<script>
    $('.area-city ul li a').click(function () {
        $('.local span').html($(this).html());
        $('.location .area').css('display', 'none');
        $('.modal-open').removeClass('modal-open');

    })

    window.mark = 'mobileHome';
    $('[data-mark=' + window.mark + ']').addClass('cur');

</script>
<script src="__STATIC__/wap/js/swiper.min.js"></script>
<script>
    $(function () {
        $("#header").autoHideNav();
        //banner轮播
        var bannerSwiper = new Swiper('.banner .swiper-container', {
            autoplay: true,
            autoplay: {
                disableOnInteraction: false
            },
            speed: 600,
            loop: true,
            autoHeight: true,
            pagination: {
                el: '.banner .swiper-pagination',
            },
        })
        //评价
        var evalSwiper = new Swiper('.evaluation .swiper-container', {
            autoplay: true,
            autoplay: {
                disableOnInteraction: false
            },
            speed: 600,
            loop: true,
            autoHeight: true,
        })
        //新闻
        var bar = $(".tab .color");
        var navSum = $(".tab").width() / 2;
        var newsSwiper = new Swiper('.news .swiper-container', {
            watchSlidesProgress: true,
            resistanceRatio: 0,
            on: {
                progress: function (progress) {

                    bar[0].style.transform = 'translateX(' + navSum * progress + 'px)';
                },
                slideChangeTransitionEnd: function (swiper) {
                    tabSpan(this.activeIndex);
                },
            },
        })
        $('.tab span').click(function () {
            var curIndex = $(this).index();
            if (!$(this).hasClass("cur")) {
                tabSpan(curIndex);
                newsSwiper.slideTo(curIndex);
            }
        });

        function tabSpan(index) {
            var $curSpan = $(".tab span").eq(index);
            if (!$curSpan.hasClass("cur")) {
                $('.tab span.cur').removeClass("cur").siblings("span").addClass('cur');
            }
        }



    });
</script>
{/block}